import React, { useEffect } from 'react';
import { Form, Input, Modal, Message } from '@arco-design/web-react';
import { IconLock } from '@arco-design/web-react/icon';

const FormItem = Form.Item;

interface Props {
  visible: boolean;
  changeVisible: (visible: boolean) => void;
  modalTitle: string;
  formList: any[];
  onConfirm: (value: any) => void;
}

function FormModal(props: Props) {
  const { visible, changeVisible, modalTitle, formList } = props;
  const [form] = Form.useForm();

  useEffect(() => {
    form.resetFields();
  }, [visible]);

  const onOk = () => {
    form.validate().then((value) => {
      if (value.newPassword !== value.againPassword) {
        Message.error('两次密码不一致');
        return;
      }
      props.onConfirm && props.onConfirm(value);
      form.resetFields();
      changeVisible(false);
    });
  };

  const onCancel = () => {
    form.resetFields();
    changeVisible(false);
  };

  return (
    <Modal
      title={modalTitle}
      visible={visible}
      onOk={onOk}
      onCancel={onCancel}
      autoFocus={false}
      focusLock={false}
      style={{ width: '700px' }}
    >
      <Form form={form}>
        {formList.map((item) => {
          return (
            <FormItem
              label={item.label}
              field={item.field}
              rules={item.rules}
              key={item.field}
            >
              <Input.Password prefix={<IconLock />} placeholder="请输入" />
            </FormItem>
          );
        })}
      </Form>
    </Modal>
  );
}

export default FormModal;
